
const SetDatavWebpackPlugin = require('set-datav-webpack-plugin')
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const projectConfig = require('./project.config')

module.exports = {
  publicPath: `${IS_PROD ? '.' : ''}/${projectConfig.appName}/`,
  outputDir: `./dist/${projectConfig.appName}`,
  devServer: {
    port: projectConfig.port
  },
  lintOnSave: false,
  configureWebpack: {
    // plugins: []
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'Axios',
      'element-plus': 'ElementPlus'
    },

    plugins: [
      // 设置vue scope的属性，前缀
      new SetDatavWebpackPlugin({
        prefix: projectConfig.cssModulesPrefix
      })
    ]
  },
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  chainWebpack: (config) => {
    config.output
      .filename('main.js')
      .chunkFilename('[name].[chunkhash:8].js')
      .jsonpFunction(`webpackJsonp-${projectConfig.appName}`)
      .library(`app-${projectConfig.appName}`)
      .libraryExport('default')
      .libraryTarget('umd')

    config.optimization.splitChunks(false)
    // 移除 html 插件、 资源预加载preload 、资源预读取prefetch
    config.plugins.delete('html').delete('preload').delete('prefetch')
  },
  css: {
    requireModuleExtension: false,
    loaderOptions: {
      css: {
        // css 模块的命名规则
        modules: {
          localIdentName: `${projectConfig.cssModulesPrefix}_[name]_[local]_[hash:base64:5]`
        },
        localsConvention: 'camelCaseOnly'
        // localsConvention: 'camelCase'
      }
    }
  }
}
